<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文件上载演示</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<form id="fileForm"
      method="post"
      enctype="multipart/form-data"
      onsubmit="return doUpload()">
  <div>
    <label>上传文件
      <input id="uploadFile" type="file" name="uploadFile">
    </label>
  </div>
  <button type="submit">上传文件</button>
</form>
</body>
<script>
  //jquery代码的表单提交事件
  function doUpload(){
    //debugger //前端debug方式(一定要打开浏览器控制台窗口)
    //获得用户选中的所有图片(获得数组)
    let files=
            document.getElementById("uploadFile").files;
    if(files.length>0){
      //获得用户选中的唯一图片(从数组中取出)
      let file=files[0];
      //开始上传这个图片
      //由于上传代码比较多,不想和这里其它代码干扰,所以定义一个方法调用
      upload(file);
    }
    //阻止表单提交效果
    return false;
  };
  // 将file上传到服务器的方法
  function upload(file){
    //定义一个表单(axios中提供的表单对象)
    let form=new FormData();
    //将文件添加到表单中
    form.append("uploadFile",file);
    //异步提交(现在是提交到网关)
    //let url="http://localhost:8881/resource/upload/"
    let url="http://localhost:9000/sca/resource/upload/";
    //获取登录后,存储到浏览器客户端的访问令牌
    let token=localStorage.getItem("accessToken");
    //发送请求时,携带访问令牌
    axios.post(url,form,{headers:{"Authorization":"Bearer "+token}})
            .then(function (response){
              alert("upload ok")
              console.log(response.data);
            })
            .catch(function (e){//失败时执行catch代码块
              //debugger
              if(e.response.status==401){
                alert("请先登录");
                location.href="/login.html";
              }else if(e.response.status==403){
                alert("您没有权限")
              }else if(e.response.status==429){
                alert("上传太频繁了")
              }
              console.log("error",e);
            })
  }
</script>
</html>
